<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>LayuiSample</title>
  <!-- layui 引用-->
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">

  <style>
    .layui-tab {
      width: 100%;
      margin: 0;
    }
    .layui-tab-title {
      height: auto;
      padding: 30px 0 30px 20%;
    }
    /* tab 字体大小， 未选中时的颜色 */
    .layui-tab-title li {
      font-size: 23px;
      color: #4D4B4B;
      margin: 0 53px;
    }
    /* tab 下边线颜色，宽度，样式 */
    .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
      border-bottom: 2px solid #1E9FFF;
    }
    /* tab 选中时的字体颜色 */
    .layui-tab-brief>.layui-tab-title .layui-this {
      color: #1E9FFF;
      margin: 0 53px;
    }

    .layui-tab-content {
      background-color: #FFFFFF;
    }




    /* 导航字体大小 */
    .layui-nav * {
      font-size: 23px;
    }

    /* 导航下划线选中颜色 */
    .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
      background-color: #1E9FFF;
    }

    /* 导航字体未选中颜色 */
    .layui-nav .layui-nav-item a {
      color:#4D4B4B;
    }

    /* 导航字体选中颜色 */
    .layui-nav .layui-nav-item a:hover,.layui-nav .layui-this a{color:#1E9FFF}

  </style>

</head>

<body>

  <!-- 选项卡 -->
  <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="background-color: #EEF0F6; position: fixed">
    <ul class="layui-tab-title">
      <li class="layui-this">助手动态</li>
      <li >智能扫描</li>
      <li>委托跟投</li>
      <li>助手记录<span class="layui-badge-dot" style="margin-bottom: 15px; margin-right: 15px"></span></li>
    </ul>
    <div class="layui-tab-content" >
      <p class="layui-tab-item layui-show" style="height: 100px">网站设置</p>
      <p class="layui-tab-item">用户管理</p>
      <p class="layui-tab-item">4</p>
      <p class="layui-tab-item">5</p>
    </div>
  </div>

  <img
    src="tile.png" style="left: 15px;
      top: 15px;
      width: 70px;
      height: 70px;
      position: fixed;
      ">

  <p
    style="
      left: 100px;
      top: 23px;
      width: 131px;
      height: 36px;
      line-height: 33px;
      color: rgba(16, 16, 16, 1);
      font-size: 21px;
      text-align: center;
      position: fixed;
    "
  >
    136****1331
  </p>


  <img
    src="tile.png" style="left: 110px;
      top: 56px;
      width: 35px;
      height: 30px;
      position: fixed;
      ">


  <p
    style="
      font-family: Roboto,serif;
      left: 150px;
      top: 60px;
      width: 73px;
      height: 26px;
      line-height: 26px;
      color: rgba(244, 61, 67, 1);
      font-size: 18px;
      text-align: center;
      position: fixed;
    "
  >
    开通会员
  </p>


  <h1>滚动动态加载数据</h1>
  <!--列表 -->
  <ul class="flow-default" id="LAY_demo1" style="margin-top: 100px; margin-bottom: 20px"></ul>

  <script src="layui/layui.js"></script>

  <script>
    // 列表数据
    layui.use('flow', function(){
      var flow = layui.flow;
      flow.load({
        elem: '#LAY_demo1' //流加载容器
        ,mb:150
        ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
        ,done: function(page, next){ //执行下一页的回调
          //模拟数据插入
          setTimeout(function(){
            var lis = [];
            for(var i = 0; i < 8; i++){
              lis.push('<li style="font-size:30px">'+ ( (page-1)*8 + i + 1 ) +'</li>')
            }
            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
            next(lis.join(''), page < 10); //假设总页数为 10
          }, 500);
        }
      });
    });

    // tab元素
    layui.use('element', function(){
      var element = layui.element;

      //一些事件监听
      element.on('tab(demo)', function(data){
        console.log(data);
      });
    });
  </script>

  <div style="position: fixed; bottom: 0; left: 0">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>

  <!-- 导航 -->
  <ul class="layui-nav layui-bg-cyan" lay-filter="" style="padding: 27px; background-color: #EEF0F6!important">
    <li class="layui-nav-item  layui-this"><a href="">最新活动</a></li>
    <li class="layui-nav-item"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
      <a href="javascript:;">解决方案</a>
      <dl class="layui-nav-child"> <!-- 二级菜单 -->
        <dd><a href="">移动模块</a></dd>
        <dd><a href="">后台模版</a></dd>
        <dd><a href="">电商平台</a></dd>
      </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
  </ul>


  <!--响应式布局-->
  <!--<div class="layui-container" style="width: auto; height: 114px; background-color: #b3d4fc">-->
    <!--常规布局（以中型屏幕桌面为例）：-->
    <!--<div class="layui-row">-->
      <!--<div class="layui-col-md3" style="background-color: #1E9FFF">-->
        <!--你的内容 3/12-->
      <!--</div>-->
      <!--<div class="layui-col-md9">-->

        <!--<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">-->
          <!--<ul class="layui-tab-title">-->
            <!--<li class="layui-this">网站设置</li>-->
            <!--<li >用户管理</li>-->
            <!--<li >用户管理</li>-->
            <!--<li>订单管理<span class="layui-badge-dot" style="margin-bottom: 15px; margin-right: 15px"></span></li>-->
          <!--</ul>-->
          <!--<div class="layui-tab-content">-->
            <!--<div class="layui-tab-item layui-show">-->
              <!--<h1>网站设置</h1><br><h1>网站设置</h1><br>-->
            <!--</div>-->
            <!--<p class="layui-tab-item">用户管理</p>-->
            <!--<p class="layui-tab-item">3</p>-->
            <!--<p class="layui-tab-item">3</p>-->
          <!--</div>-->
        <!--</div>-->

      <!--</div>-->
    <!--</div>-->
  <!--</div>-->

</body>
</html>

<!--
赤色：class="layui-bg-red"
橙色：class="layui-bg-orange"
墨绿：class="layui-bg-green"
藏青：class="layui-bg-cyan"
蓝色：class="layui-bg-blue"
雅黑：class="layui-bg-black"
银灰：class="layui-bg-gray"
-->
